<template>
  <div class="excel-param-binder">
    <!-- 文件上传区域 -->
    <el-card class="upload-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>Excel文件上传</span>
      </div>
      
      <el-upload
        class="upload-demo"
        drag
        action=""
        :auto-upload="false"
        :on-change="handleFileChange"
        :show-file-list="false"
        :before-upload="beforeUpload"
        accept=".xlsx, .xls, .csv"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将Excel文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          支持 .xlsx, .xls, .csv 格式文件，文件大小不超过10MB
        </div>
      </el-upload>
    </el-card>

    <!-- 加载状态 -->
    <el-alert
      v-if="isLoading"
      title="正在解析Excel文件，请稍候..."
      type="info"
      :closable="false"
      show-icon
      style="margin-bottom: 20px;"
    ></el-alert>

    <!-- 解析后的表格展示 -->
    <el-card v-if="tableData.length > 0" class="table-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>解析后的Excel数据表格</span>
        <div class="card-actions">
          <el-button type="primary" size="small" @click="exportToExcel">
            <i class="el-icon-download"></i> 导出Excel
          </el-button>
          <el-button size="small" @click="clearTable">
            <i class="el-icon-delete"></i> 清空表格
          </el-button>
        </div>
      </div>

      <div class="table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :span-method="arraySpanMethod"
          highlight-current-row
          max-height="500"
        >
          <el-table-column
            v-for="(header, index) in tableHeaders"
            :key="index"
            :prop="`col_${index}`"
            :label="header || `列${index + 1}`"
            :width="getColumnWidth(header)"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <div v-if="isCellMerged(scope.$index, index)" class="merged-cell">
                {{ formatCellValue(scope.row[index]) }}
              </div>
              <div v-else>
                {{ formatCellValue(scope.row[index]) }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 错误提示 -->
    <el-alert
      v-if="errorMessage"
      :title="errorMessage"
      type="error"
      :closable="true"
      @close="errorMessage = ''"
      style="margin-bottom: 20px;"
    ></el-alert>

    <!-- 参数绑定配置 -->
    <el-card v-if="tableData.length > 0" class="param-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>参数绑定配置</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="showMappingHelp = true">
          帮助
        </el-button>
      </div>
      
      <el-alert
        title="请为每个参数选择对应的Excel列"
        type="info"
        :closable="false"
        style="margin-bottom: 20px;"
      ></el-alert>
      
      <!-- 参数组展示 -->
      <div class="param-groups">
        <el-collapse v-model="activeGroups">
          <el-collapse-item 
            v-for="group in paramConfig.paramGroups" 
            :key="group.groupId"
            :title="group.groupName"
            :name="group.groupId"
          >
            <!-- 主组参数 -->
            <div v-if="group.paramItems && group.paramItems.length > 0" class="param-section">
              <h4>主组参数</h4>
              <div class="param-list">
                <div 
                  v-for="param in group.paramItems" 
                  :key="param.paramId"
                  class="param-item"
                >
                  <div class="param-info">
                    <span class="param-name">{{ param.paramName }}</span>
                    <div class="param-meta">
                      <el-tag size="mini" :type="getDataTypeTagType(param.dataType)">
                        {{ param.dataType }}
                      </el-tag>
                      <el-tag v-if="param.paramType === 'calculation'" size="mini" type="warning">
                        计算参数
                      </el-tag>
                      <el-tag v-if="param.isMultiMeasure" size="mini" type="success">
                        多测量值({{ param.multiMeasureCount }})
                      </el-tag>
                      <span class="param-code">{{ param.paramCode }}</span>
                    </div>
                  </div>
                  <div class="column-binding">
                    <el-select 
                      v-model="paramMapping[param.paramCode]" 
                      placeholder="选择Excel列"
                      size="small"
                      @change="onParamMappingChange(param)"
                    >
                      <el-option 
                        v-for="header in tableHeaders" 
                        :key="header" 
                        :label="header" 
                        :value="header"
                      ></el-option>
                    </el-select>
                    <div v-if="paramMapping[param.paramCode]" class="binding-preview">
                      <span>示例值: {{ getSampleValue(param.paramCode) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 子组参数 -->
            <div v-if="group.childGroups && group.childGroups.length > 0" class="child-groups">
              <div 
                v-for="childGroup in group.childGroups" 
                :key="childGroup.groupId"
                class="child-group"
              >
                <h5>{{ childGroup.groupName }}</h5>
                <div class="param-list">
                  <div 
                    v-for="param in childGroup.paramItems" 
                    :key="param.paramId"
                    class="param-item"
                  >
                    <div class="param-info">
                      <span class="param-name">{{ param.paramName }}</span>
                      <div class="param-meta">
                        <el-tag size="mini" :type="getDataTypeTagType(param.dataType)">
                          {{ param.dataType }}
                        </el-tag>
                        <el-tag v-if="param.paramType === 'calculation'" size="mini" type="warning">
                          计算参数
                        </el-tag>
                        <el-tag v-if="param.isMultiMeasure" size="mini" type="success">
                          多测量值({{ param.multiMeasureCount }})
                        </el-tag>
                        <span class="param-code">{{ param.paramCode }}</span>
                      </div>
                    </div>
                    <div class="column-binding">
                      <el-select 
                        v-model="paramMapping[param.paramCode]" 
                        placeholder="选择Excel列"
                        size="small"
                        @change="onParamMappingChange(param)"
                      >
                        <el-option 
                          v-for="header in tableHeaders" 
                          :key="header" 
                          :label="header" 
                          :value="header"
                        ></el-option>
                      </el-select>
                      <div v-if="paramMapping[param.paramCode]" class="binding-preview">
                        <span>示例值: {{ getSampleValue(param.paramCode) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="binding-actions">
        <el-button type="primary" @click="applyParamBinding" :disabled="!isBindingComplete">
          应用参数绑定
        </el-button>
        <el-button @click="autoMatchColumns">
          自动匹配列
        </el-button>
        <el-button @click="resetBinding">
          重置绑定
        </el-button>
      </div>
    </el-card>

    <!-- 绑定结果展示 -->
    <el-card v-if="boundData.length > 0" class="result-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>参数绑定结果</span>
        <span class="result-count">共 {{ boundData.length }} 行数据</span>
      </div>
      
      <el-table
        :data="boundData"
        border
        style="width: 100%"
        max-height="400"
      >
        <el-table-column
          v-for="param in getAllParams()"
          :key="param.paramCode"
          :prop="param.paramCode"
          :label="param.paramName"
          :width="param.columnWidth || 120"
        >
          <template slot-scope="scope">
            <div :class="{
              'calculation-param': param.paramType === 'calculation',
              'multi-measure-param': param.isMultiMeasure
            }">
              {{ scope.row[param.paramCode] !== undefined ? scope.row[param.paramCode] : '-' }}
              <span v-if="param.unit" class="param-unit">{{ param.unit }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 绑定帮助对话框 -->
    <el-dialog
      title="参数绑定帮助"
      :visible.sync="showMappingHelp"
      width="600px"
    >
      <div class="help-content">
        <h4>绑定说明：</h4>
        <p>1. 为每个参数选择对应的Excel列</p>
        <p>2. 系统会自动根据参数的数据类型进行数据转换</p>
        <p>3. 计算参数会根据依赖关系自动计算</p>
        <p>4. 多测量值参数需要绑定多个列</p>
        
        <h4>数据类型：</h4>
        <p><el-tag size="mini" type="primary">number</el-tag> 数值类型，会自动转换为数字</p>
        <p><el-tag size="mini" type="success">text</el-tag> 文本类型，保持原样</p>
        
        <h4>参数类型：</h4>
        <p><el-tag size="mini">base</el-tag> 基础参数，从Excel直接读取</p>
        <p><el-tag size="mini" type="warning">calculation</el-tag> 计算参数，根据公式自动计算</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showMappingHelp = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  name: 'ExcelParamBinder',
  props: {
    paramConfig: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      tableHeaders: [],
      mergedCells: [],
      paramMapping: {},
      boundData: [],
      activeGroups: [],
      showMappingHelp: false,
      isLoading: false,
      errorMessage: ''
    }
  },
  computed: {
    // 检查绑定是否完成
    isBindingComplete() {
      const allParams = this.getAllParams()
      return allParams.every(param => this.paramMapping[param.paramCode])
    }
  },
  methods: {
    // 上传前的验证
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.ms-excel' || 
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.name.endsWith('.xlsx') || 
        file.name.endsWith('.xls') ||
        file.name.endsWith('.csv')
      
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isExcel) {
        this.$message.error('只能上传Excel文件!')
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传文件大小不能超过10MB!')
        return false
      }
      return true
    },

    // 处理文件上传
    async handleFileChange(file) {
      if (!file) {
        this.$message.error('请选择文件')
        return
      }

      this.isLoading = true
      this.errorMessage = ''

      try {
        await this.parseExcelFile(file.raw)
        this.$message.success(`成功解析 ${this.tableData.length} 行数据`)
      } catch (error) {
        console.error('Excel解析错误:', error)
        this.errorMessage = `Excel文件解析失败: ${error.message || '请检查文件格式和内容'}`
        this.$message.error('Excel文件解析失败，请检查文件格式')
      } finally {
        this.isLoading = false
      }
    },

    // 解析Excel文件
    parseExcelFile(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        
        reader.onload = (e) => {
          try {
            // 方法1: 使用ArrayBuffer
            const data = new Uint8Array(e.target.result)
            const workbook = XLSX.read(data, { 
              type: 'array',
              cellDates: true,
              cellStyles: true
            })
            
            this.processWorkbook(workbook)
            resolve()
          } catch (error) {
            // 如果ArrayBuffer方式失败，尝试其他方式
            try {
              // 方法2: 使用二进制字符串
              const binaryString = e.target.result
              const workbook = XLSX.read(binaryString, {
                type: 'binary',
                cellDates: true,
                cellStyles: true
              })
              
              this.processWorkbook(workbook)
              resolve()
            } catch (error2) {
              reject(new Error('无法解析Excel文件，请确保文件格式正确且未损坏'))
            }
          }
        }
        
        reader.onerror = () => {
          reject(new Error('文件读取失败，请重试'))
        }
        
        // 优先使用readAsArrayBuffer，如果不支持则使用readAsBinaryString
        if (typeof reader.readAsArrayBuffer !== 'undefined') {
          reader.readAsArrayBuffer(file)
        } else {
          reader.readAsBinaryString(file)
        }
      })
    },

    // 处理工作簿
    processWorkbook(workbook) {
      if (!workbook.SheetNames || workbook.SheetNames.length === 0) {
        throw new Error('Excel文件中没有工作表')
      }

      // 获取第一个工作表
      const firstSheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[firstSheetName]
      
      if (!worksheet) {
        throw new Error('工作表为空或无法访问')
      }

      // 解析数据 - 使用更稳定的方式
      let jsonData
      try {
        jsonData = XLSX.utils.sheet_to_json(worksheet, { 
          header: 1,
          defval: '',
          blankrows: false
        })
      } catch (error) {
        // 如果标准方式失败，尝试原始方式
        jsonData = this.sheetToArray(worksheet)
      }
      
      // 获取合并单元格信息
      this.mergedCells = worksheet['!merges'] || []
      
      // 处理数据
      this.processExcelData(jsonData)
      
      // 初始化参数映射
      this.initParamMapping()
      
      // 默认展开所有参数组
      this.activeGroups = this.paramConfig.paramGroups.map(group => group.groupId)
    },

    // 备用方法：手动将工作表转换为数组
    sheetToArray(worksheet) {
      const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1')
      const result = []
      
      for (let R = range.s.r; R <= range.e.r; ++R) {
        const row = []
        for (let C = range.s.c; C <= range.e.c; ++C) {
          const cellAddress = { c: C, r: R }
          const cellRef = XLSX.utils.encode_cell(cellAddress)
          const cell = worksheet[cellRef]
          row.push(cell ? cell.v : '')
        }
        result.push(row)
      }
      
      return result
    },

    // 处理Excel数据
    processExcelData(data) {
      if (!data || data.length === 0) {
        throw new Error('Excel文件为空')
      }
      
      // 提取表头
      this.tableHeaders = (data[0] || []).map((header, index) => 
        header !== null && header !== undefined ? header.toString().trim() : `列${index + 1}`
      )
      
      // 处理数据行
      this.tableData = data.slice(1)
        .filter(row => row && row.some(cell => 
          cell !== null && cell !== undefined && cell !== ''
        ))
        .map(row => {
          // 确保每行都有足够的列
          const fullRow = Array(this.tableHeaders.length).fill('')
          if (row) {
            row.forEach((cell, index) => {
              if (index < fullRow.length) {
                fullRow[index] = cell !== null && cell !== undefined ? cell : ''
              }
            })
          }
          return fullRow
        })
      
      if (this.tableData.length === 0) {
        throw new Error('Excel文件中没有有效的数据行')
      }
    },

    // 格式化单元格值
    formatCellValue(value) {
      if (value === null || value === undefined) {
        return ''
      }
      
      // 处理日期
      if (value instanceof Date) {
        return value.toLocaleDateString()
      }
      
      return value.toString()
    },

    // 初始化参数映射
    initParamMapping() {
      this.paramMapping = {}
      const allParams = this.getAllParams()
      
      allParams.forEach(param => {
        // 尝试自动匹配表头
        const matchedHeader = this.findBestMatch(param.paramName)
        if (matchedHeader) {
          this.paramMapping[param.paramCode] = matchedHeader
        }
      })
    },

    // 自动匹配列
    autoMatchColumns() {
      const allParams = this.getAllParams()
      let matchedCount = 0
      
      allParams.forEach(param => {
        if (!this.paramMapping[param.paramCode]) {
          const matchedHeader = this.findBestMatch(param.paramName)
          if (matchedHeader) {
            this.paramMapping[param.paramCode] = matchedHeader
            matchedCount++
          }
        }
      })
      
      if (matchedCount > 0) {
        this.$message.success(`自动匹配了 ${matchedCount} 个参数`)
      } else {
        this.$message.info('没有找到可自动匹配的参数')
      }
    },

    // 查找最佳匹配的表头
    findBestMatch(paramName) {
      const cleanParamName = paramName.replace(/[(（].*[)）]/g, '').trim()
      
      // 精确匹配
      let match = this.tableHeaders.find(header => 
        header && header.toString().includes(cleanParamName)
      )
      
      if (!match) {
        // 模糊匹配
        match = this.tableHeaders.find(header => 
          header && this.calculateSimilarity(header.toString(), cleanParamName) > 0.6
        )
      }
      
      return match
    },

    // 计算字符串相似度
    calculateSimilarity(str1, str2) {
      if (!str1 || !str2) return 0
      
      const longer = str1.length > str2.length ? str1 : str2
      const shorter = str1.length > str2.length ? str2 : str1
      
      if (longer.length === 0) return 1.0
      
      return (longer.length - this.editDistance(longer, shorter)) / parseFloat(longer.length)
    },

    // 编辑距离算法
    editDistance(s1, s2) {
      s1 = s1.toLowerCase()
      s2 = s2.toLowerCase()
      
      const costs = []
      for (let i = 0; i <= s1.length; i++) {
        let lastValue = i
        for (let j = 0; j <= s2.length; j++) {
          if (i === 0) {
            costs[j] = j
          } else if (j > 0) {
            let newValue = costs[j - 1]
            if (s1.charAt(i - 1) !== s2.charAt(j - 1)) {
              newValue = Math.min(Math.min(newValue, lastValue), costs[j]) + 1
            }
            costs[j - 1] = lastValue
            lastValue = newValue
          }
        }
        if (i > 0) costs[s2.length] = lastValue
      }
      return costs[s2.length]
    },

    // 获取所有参数（扁平化）
    getAllParams() {
      const params = []
      
      const extractParams = (paramItems) => {
        paramItems.forEach(item => {
          if (!item || !item.paramCode) return
          
          // 处理多测量值参数
          if (item.isMultiMeasure && item.multiMeasureCount > 1) {
            for (let i = 0; i < item.multiMeasureCount; i++) {
              params.push({
                ...item,
                paramName: `${item.paramName} (${i + 1})`,
                paramCode: `${item.paramCode}[${i}]`,
                originalParamCode: item.paramCode
              })
            }
          } else {
            params.push(item)
          }
        })
      }
      
      if (this.paramConfig.paramGroups) {
        this.paramConfig.paramGroups.forEach(group => {
          if (!group) return
          
          // 主组参数
          if (group.paramItems && group.paramItems.length > 0) {
            extractParams(group.paramItems)
          }
          
          // 子组参数
          if (group.childGroups && group.childGroups.length > 0) {
            group.childGroups.forEach(childGroup => {
              if (childGroup && childGroup.paramItems && childGroup.paramItems.length > 0) {
                extractParams(childGroup.paramItems)
              }
            })
          }
        })
      }
      
      return params
    },

    // 获取数据类型标签样式
    getDataTypeTagType(dataType) {
      const typeMap = {
        number: 'primary',
        text: 'success',
        date: 'warning',
        boolean: 'danger'
      }
      return typeMap[dataType] || 'info'
    },

    // 获取列宽
    getColumnWidth(header) {
      const allParams = this.getAllParams()
      const param = allParams.find(p => this.paramMapping[p.paramCode] === header)
      
      return (param && param.columnWidth) ? param.columnWidth : 120
    },

    // 处理合并单元格
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log(row, column, rowIndex, columnIndex)
      for (const merge of this.mergedCells) {
        if (rowIndex === merge.s.r && columnIndex === merge.s.c) {
          return {
            rowspan: merge.e.r - merge.s.r + 1,
            colspan: merge.e.c - merge.s.c + 1
          }
        }
        
        if (rowIndex >= merge.s.r && rowIndex <= merge.e.r && 
            columnIndex >= merge.s.c && columnIndex <= merge.e.c) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },

    // 检查单元格是否合并
    isCellMerged(rowIndex, columnIndex) {
      return this.mergedCells.some(merge => 
        rowIndex === merge.s.r && columnIndex === merge.s.c
      )
    },

    // 参数映射变化处理
    onParamMappingChange(param) {
      // 可以在这里添加验证逻辑
      console.log(`参数 ${param.paramName} 绑定到列: ${this.paramMapping[param.paramCode]}`)
    },

    // 获取示例值
    getSampleValue(paramCode) {
      const header = this.paramMapping[paramCode]
      if (!header) return ''
      
      const headerIndex = this.tableHeaders.indexOf(header)
      if (headerIndex === -1 || this.tableData.length === 0) return ''
      
      const sampleValue = this.tableData[0][headerIndex]
      return sampleValue !== undefined ? sampleValue : '空值'
    },

    // 应用参数绑定
    applyParamBinding() {
      if (!this.isBindingComplete) {
        this.$message.warning('请先完成所有参数的绑定配置')
        return
      }
      
      try {
        this.boundData = this.tableData.map((row, rowIndex) => {
            console.log(row, rowIndex)
          const boundRow = {}
          const allParams = this.getAllParams()
          
          allParams.forEach(param => {
            const header = this.paramMapping[param.paramCode]
            if (header) {
              const headerIndex = this.tableHeaders.indexOf(header)
              if (headerIndex !== -1 && row[headerIndex] !== undefined) {
                // 根据参数数据类型进行转换
                let value = row[headerIndex]
                
                if (param.dataType === 'number') {
                  value = Number(value)
                  // 处理非数字值
                  if (isNaN(value)) {
                    value = 0
                  }
                  // 处理精度
                  if (param.precision && !isNaN(value)) {
                    value = Number(value.toFixed(param.precision))
                  }
                }
                
                boundRow[param.paramCode] = value
              }
            }
          })
          
          // 处理计算参数
          this.processCalculationParams(boundRow)
          
          return boundRow
        })
        
        this.$message.success(`成功绑定 ${this.boundData.length} 行数据`)
      } catch (error) {
        console.error('数据绑定错误:', error)
        this.$message.error('数据绑定失败，请检查配置')
      }
    },

    // 处理计算参数
    processCalculationParams(row) {
      const allParams = this.getAllParams()
      const calculationParams = allParams.filter(p => p.paramType === 'calculation')
      
      calculationParams.forEach(param => {
        try {
          // 这里需要实现计算表达式的解析和执行
          // 由于计算表达式比较复杂，这里简化处理
          if (param.calculationExpr) {
            // 在实际应用中，需要解析 calculationExpr 并计算
            // 这里只是示例
            row[param.paramCode] = this.evaluateCalculation(param, row)
          }
        } catch (error) {
          console.error(`计算参数 ${param.paramName} 执行错误:`, error)
          row[param.paramCode] = '计算错误'
        }
      })
    },

    // 评估计算表达式（简化版）
    evaluateCalculation(param, row) {
      // 这里应该实现完整的表达式解析
      // 现在只是简单示例
      const expr = param.calculationExpr
      
      if (expr.includes('ROUND') && expr.includes('a_ui8b')) {
        const value = row['a_ui8b'] || 0
        return Math.round(value * 1.0 * 100) / 100
      }
      
      return '待计算'
    },

    // 重置绑定
    resetBinding() {
      this.paramMapping = {}
      this.boundData = []
      this.initParamMapping()
      this.$message.info('绑定配置已重置')
    },

    // 导出为Excel
    exportToExcel() {
      if (this.boundData.length === 0) {
        this.$message.warning('没有数据可导出')
        return
      }
      
      try {
        // 创建工作簿
        const wb = XLSX.utils.book_new()
        
        // 准备导出数据
        const allParams = this.getAllParams()
        const exportData = [
          allParams.map(param => param.paramName), // 表头
          ...this.boundData.map(row => 
            allParams.map(param => row[param.paramCode] || '')
          )
        ]
        
        // 创建工作表
        const ws = XLSX.utils.aoa_to_sheet(exportData)
        
        // 将工作表添加到工作簿
        XLSX.utils.book_append_sheet(wb, ws, '参数绑定数据')
        
        // 导出文件
        XLSX.writeFile(wb, `参数绑定数据_${new Date().getTime()}.xlsx`)
        
        this.$message.success('数据导出成功')
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('数据导出失败')
      }
    },

    // 清空表格
    clearTable() {
      this.tableData = []
      this.tableHeaders = []
      this.mergedCells = []
      this.boundData = []
      this.paramMapping = {}
      this.errorMessage = ''
      this.$message.info('已清空表格数据')
    }
  }
}
</script>

<style scoped>
.excel-param-binder {
  padding: 20px;
}

.upload-card, .table-card, .param-card, .result-card {
  margin-bottom: 20px;
}

.card-actions {
  float: right;
}

.table-container {
  overflow-x: auto;
}

.merged-cell {
  background-color: #f0f9ff;
  font-weight: bold;
}

.param-groups {
  max-height: 500px;
  overflow-y: auto;
}

.param-section {
  margin-bottom: 20px;
}

.param-section h4 {
  margin: 0 0 10px 0;
  color: #606266;
}

.child-group {
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 2px solid #e6e6e6;
}

.child-group h5 {
  margin: 0 0 10px 0;
  color: #909399;
}

.param-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
}

.param-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fafafa;
}

.param-info {
  flex: 1;
}

.param-name {
  display: block;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.param-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.param-code {
  font-size: 12px;
  color: #909399;
}

.column-binding {
  width: 200px;
  text-align: right;
}

.binding-preview {
  font-size: 12px;
  color: #67c23a;
  margin-top: 4px;
}

.binding-actions {
  margin-top: 20px;
  text-align: center;
}

.result-count {
  float: right;
  color: #909399;
  font-size: 14px;
}

.calculation-param {
  background-color: #fdf6ec;
  color: #e6a23c;
  padding: 2px 4px;
  border-radius: 2px;
}

.multi-measure-param {
  background-color: #f0f9ff;
  padding: 2px 4px;
  border-radius: 2px;
}

.param-unit {
  font-size: 12px;
  color: #909399;
  margin-left: 4px;
}

.help-content h4 {
  margin: 16px 0 8px 0;
  color: #303133;
}

.help-content p {
  margin: 8px 0;
  color: #606266;
}
</style>